/*
* @Date: 2021/1/27
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import Icon from 'components/Icon';
import { Input } from 'antd';
import './index.scss';

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      backgroundPositionLeft: '',
      backgroundPositionTop: '',
    };
  }

  onLeftChange = (e) => {
    const { value } = e.currentTarget;
    const { onStyleChange } = this.props;
    this.setState({
      backgroundPositionLeft: value,
    }, () => {
      onStyleChange && onStyleChange(
        'background-position',
        `${this.state.backgroundPositionLeft} ${this.state.backgroundPositionTop}`
      );
    });
  }

  onPositionChange = (left, top) => {
    const { onStyleChange } = this.props;
    this.setState({
      backgroundPositionLeft: left,
      backgroundPositionTop: top,
    }, () => {
      onStyleChange && onStyleChange(
        'background-position',
        `${this.state.backgroundPositionLeft} ${this.state.backgroundPositionTop}`
      );
    });
  }

  onTopChange = (e) => {
    const { value } = e.currentTarget;
    const { onStyleChange } = this.props;
    this.setState({
      backgroundPositionTop: value,
    }, () => {
      onStyleChange && onStyleChange(
        'background-position',
        `${this.state.backgroundPositionLeft} ${this.state.backgroundPositionTop}`
      );
    });
  }

  render() {
    const { backgroundPositionLeft = '', backgroundPositionTop = '' } = this.state;
    return (
      <div className="background-position-box">
        <div className="background-position-quick">
          <div className="background-position-quick-item">
            <Icon type="zuoshangjiao1" onClick={() => this.onPositionChange('0', '0')} />
            <Icon type="dingbu" onClick={() => this.onPositionChange('50%', '0')}/>
            <Icon type="youshangjiao1" onClick={() => this.onPositionChange('100%', '0')}/>
          </div>
          <div className="background-position-quick-item">
            <Icon type="kaozuo" onClick={() => this.onPositionChange('0', '50%')}/>
            <Icon type="zhengzhongjian" onClick={() => this.onPositionChange('50%', '50%')}/>
            <Icon type="kaoyou" onClick={() => this.onPositionChange('100%', '50%')}/>
          </div>
          <div className="background-position-quick-item">
            <Icon type="zuoxiajiao1" onClick={() => this.onPositionChange('0', '100%')}/>
            <Icon type="dibu" onClick={() => this.onPositionChange('50%', '100%')}/>
            <Icon type="youxiajiao1" onClick={() => this.onPositionChange('100%', '100%')} />
          </div>
        </div>
        <div className="background-position-input">
          <div className="background-position-input-item">
            <label>左</label>
            <input value={backgroundPositionLeft} onClick={this.onLeftChange} />
          </div>
          <div className="background-position-input-item">
            <label>顶</label>
            <input value={backgroundPositionTop} onClick={this.onTopChange}/>
          </div>
        </div>
      </div>
    )
  }
}
